<template>
  <ElTag :type="value == 'yes' ? 'primary' : 'info'" :disabled="disabled">{{ label }}</ElTag>
</template>
<script setup lang="ts">
  import { ElTag } from 'element-plus';
  import { computed, ref, watch, watchEffect } from 'vue';  
  import { Column } from '@/seed-application/types';

  const props = defineProps<{column: Column, modelValue?: any, disabled?: boolean}>()
  const column = props.column
  const disabled = props.disabled

  const emits = defineEmits(['update:modelValue'])

  const value = ref<'yes'|'no'>(props.modelValue)
  const label = computed(() => value.value == 'yes' ? '是' : '否')

  watchEffect(() => emits('update:modelValue', value.value))
  watch(() => props.modelValue, (val) => value.value = val)
</script>